<template>
     <MyHome></MyHome>
    <!-- 查询条件的盒子 -->
    <div class="selcetbox">
    <div>
      <input type="text" placeholder="请输入起点站" class="input" v-model="channel.startingpiano" />
      <input type="text" placeholder="请输入终点站" class="input" v-model="channel.terminalpiano" />
      <input type="text" placeholder="请输入发车时间" class="input" v-model="channel.departurepiano" />
      <input type="text" placeholder="请输入到达时间" class="input" v-model="channel.arrivalpiano" />
      <input type="text" placeholder="请输入座位类型" class="input" v-model="channel.seatTypepiano" />
      <el-button type="primary" @click="select">查询</el-button>
    </div>
    </div>


<!-- 查询完的结果放这里 -->
    <div class="selectResult" v-if="channel.isLogin === true">
        <el-table :data="channel.selecttrainList" style="width: 100%">
    <el-table-column prop="seatID" label="座位ID" width="180" />
    <el-table-column prop="starting" label="起点站" width="180" />
    <el-table-column prop="terminal" label="终点站" />
    <el-table-column prop="departure" label="发车时间" />
    <el-table-column prop="arrival" label="到达时间" />
    <el-table-column prop="seatType" label="座位类型" />
    <el-table-column prop="price" label="票价" />
    <!-- <el-table-column prop="sold" label="是否售完" /> -->
      <!-- 按钮 -->
      <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="handleEditone(scope.$index, scope.row)">
          订票
        </el-button>
      </template>
    </el-table-column>

  </el-table>
    </div>
    <div v-if="channel.isLogin === false" class="nologin">
     <img src="../assets/用户.png" alt="cw"> 
      <span class="wz1">您好,请先登录!再选择查询车票的有关信息。</span>
    </div>





</template>


<script setup>
// import { ref } from 'vue';
import MyHome from './top/MyHome.vue';
import { useCounterStore } from '../stores/counter'
import { ElMessageBox } from 'element-plus'
import { ElMessage } from 'element-plus'
const channel = useCounterStore()

//控制订票的弹出框的显示
// const centerDialogVisible = ref(false)

// //起点站双向数据绑定
// const starting = ref('');
// starting.value = channel.startingpiano;
// //终点站双向数据绑定
// const terminal = ref('');
// terminal.value = channel.terminalpiano;
// //发车时间双向数据绑定
// const departure = ref('');
// departure.value = channel.departurepiano;
// //到达时间双向数据绑定
// const arrival = ref('');
// arrival.value = channel.arrivalpiano;
// //座位类型双向数据绑定
// const seatType = ref('');
// seatType.value = channel.seatTypepiano;

//select
const select = () => {
  channel.selecttrain()
}

const handleEditone = (index, row) => {
  if(channel.value1 === false){
    ElMessage({
      type: 'warning',
      message: '管理已经禁止购票操作！',
    })
    return;
  }


 //跳出弹出框选择确定或取消
  ElMessageBox.confirm(
    '是否确定订票?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
  channel.trainNumber = row.seatID
  channel.starting = row.starting
  channel.terminal = row.terminal
  channel.departure = row.departure
  channel.arrival = row.arrival
  channel.seatType = row.seatType
  channel.price = row.price
  channel.price1 = row.price1
  channel.grade1 = row.grade1
  channel.grade2 = row.grade2
  channel.seatno = row.seatno
  channel.orderList();
   //订票成功的弹出提示
   ElMessage({
    type: 'success',
    message: '您订票成功',
  })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '您取消订票',
      })
})
}
</script>



<style lang="css" scoped>
.input{
    width: 100px;
    height: 30px;
    margin: 10px;
}
.selcetbox{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100px;
    margin: 20px auto;
    /* background-color: rgba(240, 240, 240, 0.7); */
    border-radius: 10px;
}
.selectResult{
    width: 100%;
    margin: auto;
}
.nologin{
    width: 100%;
    height: 100px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
.wz1{
    font-size: 20px;
    font-weight: 800;
    margin-left: 20px;
}
img{
    width: 100px;
    height: 100px;
    margin-left: 20px;
}

</style>
